<template>
  <div class="register absolute">
    <div class="fixHead">
      <div class="title">
        <span class="iconfont icon-jiantou" @click="$router.go(-1)"></span>
        <span class="icon-home" @click="$router.push('/')"></span>
        <h1></h1>
      </div>
      <div style="height: 0.88rem;"></div>
    </div>

    <div class="tab">
      <div :class="formItem == 2 ? 'active' : ''" @click="formItem = 2">
        注册
      </div>
      <div
        :class="formItem == 1 || formItem == 3 ? 'active' : ''"
        @click="formItem = 1"
      >
        登录
      </div>
    </div>

    <!-- 验证码登录 -->
    <div v-if="formItem === 1">
      <div class="ysList" style="padding-bottom: 1.3rem;">
        <div class="item">
          <label>手机号</label>
          <input
            type="text"
            placeholder="请输入手机号"
            autocomplete="off"
            v-model="account"
          />
        </div>
        <div class="item">
          <label>验证码</label>
          <input
            type="text"
            placeholder="请输入"
            style="width: 2.3rem;"
            v-model="captcha"
          />
          <button class="sendCode" type="button" @click="code">
            {{ text }}
          </button>
        </div>
      </div>
      <div class="registerBtn" @click="loginMobile">登录</div>
      <div class="tip"><span @click="formItem = 3">账号密码登录</span></div>
    </div>

    <!-- 账号密码登录 -->
    <div v-if="formItem === 3">
      <div class="ysList" style="padding-bottom: 0.46rem;">
        <div class="item">
          <label>手机号</label>
          <input
            type="text"
            placeholder="请输入手机号"
            autocomplete="off"
            v-model="account"
          />
        </div>
        <div class="item">
          <label>密码</label>
          <input
            type="password"
            placeholder="6-18位数字或字母"
            maxlength="18"
            v-model="password"
          />
        </div>
        <router-link :to="'/change_password'" class="forgot"
          >忘记密码？</router-link
        >
      </div>
      <div class="registerBtn" @click="submit">登录</div>
      <div class="tip"><span @click="formItem = 1">短信验证码登录</span></div>
    </div>

    <!-- 注册 -->
    <div v-if="formItem === 2">
      <div class="ysList">
        <div class="item">
          <label>手机号</label>
          <input
            type="text"
            placeholder="请输入注册手机号"
            autocomplete="off"
            v-model="account"
          />
        </div>
        <div class="item">
          <label>验证码</label>
          <input
            type="text"
            placeholder="请输入"
            style="width: 2.3rem;"
            v-model="captcha"
          />
          <button class="sendCode" type="button" @click="code">
            {{ text }}
          </button>
        </div>
        <div class="item">
          <label>邀请人</label>
          <input
            type="text"
            placeholder="邀请人的个人ID"
            v-model="inviteCode"
          />
        </div>
      </div>
      <div class="registerBtn" @click="register">注册</div>
    </div>
  </div>
</template>
<script>
import sendVerifyCode from "@mixins/SendVerifyCode";
import { validatorDefaultCatch } from "@utils/dialog";
import attrs, { required, alpha_num, chs_phone } from "@utils/validate";

export default {
  name: "Login",
  mixins: [sendVerifyCode],
  data: function() {
    return {
      account: "17773757967",
      password: "",
      inviteCode: "",
      captcha: "",
      formItem: 2,
      type: "login"
    };
  },
  mounted: function() {},
  methods: {
    async loginMobile() {
      var that = this;
      const { account, captcha } = that;
      try {
        await that
          .$validator({
            account: [
              required(required.message("手机号")),
              chs_phone(chs_phone.message())
            ],
            captcha: [
              required(required.message("验证码")),
              alpha_num(alpha_num.message("验证码"))
            ]
          })
          .validate({
            account,
            captcha
          });
      } catch (e) {
        return validatorDefaultCatch(e);
      }
      that.$router.replace("/");
    },
    async register() {
      var that = this;
      const { account, captcha, inviteCode } = that;
      try {
        await that
          .$validator({
            account: [
              required(required.message("手机号")),
              chs_phone(chs_phone.message())
            ],
            captcha: [
              required(required.message("验证码")),
              alpha_num(alpha_num.message("验证码"))
            ],
            inviteCode: [required(required.message("邀请人ID"))]
          })
          .validate({
            account,
            captcha,
            inviteCode
          });
      } catch (e) {
        return validatorDefaultCatch(e);
      }
      that.$router.replace("/");
    },
    async code() {
      var that = this;
      const { account } = that;
      try {
        await that
          .$validator({
            account: [
              required(required.message("手机号")),
              chs_phone(chs_phone.message())
            ]
          })
          .validate({
            account
          });
      } catch (e) {
        return validatorDefaultCatch(e);
      }
      if (that.formItem == 2) that.type = "register";
      if (that.formItem == 1 || that.formItem == 3) that.type = "login";
      that.sendCode();
    },
    async submit() {
      const { account, password } = this;
      try {
        await this.$validator({
          account: [
            required(required.message("手机号")),
            chs_phone(chs_phone.message())
          ],
          password: [
            required(required.message("密码")),
            attrs.range([6, 18], attrs.range.message("密码")),
            alpha_num(alpha_num.message("密码"))
          ]
        }).validate({
          account,
          password
        });
      } catch (e) {
        return validatorDefaultCatch(e);
      }
      this.$router.replace("/");
    }
  }
};
</script>

<style scoped>
.register {
  background: #27242d url(../../assets/images/mkf/loginBg.png) top left
    no-repeat;
  background-size: 100%;
}

.fixHead .title {
  background-color: transparent;
}

.tab {
  width: 6.5rem;
  height: 0.68rem;
  display: flex;
  flex-direction: row;
  margin: 0.56rem auto 0.76rem;
  align-items: flex-end;
}

.tab div {
  font-size: 0.32rem;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.6);
  margin-right: 0.6rem;
}

.tab .active {
  font-size: 0.48rem;
  font-weight: bold;
  letter-spacing: 1px;
  color: #fff;
  background: url(../../assets/images/mkf/loginBg2.png) center no-repeat;
  background-size: 0.69rem 0.16rem;
  background-position-y: 0.46rem;
}

.ysList {
  width: 6.5rem;
  margin: 0 auto;
}

.ysList .item {
  width: 4.8rem;
  height: 1.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.ysList .item label {
  display: block;
  width: 1.4rem;
  font-size: 0.32rem;
  text-align: left;
  color: rgba(255, 255, 255, 0.6);
}

.ysList .item input {
  display: block;
  width: 3.4rem;
  height: 1rem;
  font-size: 0.32rem;
  /* font-weight: bold; */
  padding: 0;
  color: #fff;
  margin: 0;
  border: none;
  background-color: transparent;
}

.ysList .item .sendCode {
  display: block;
  width: 0.9rem;
  height: 24px;
  padding: 0;
  border-radius: 0.24rem;
  border: solid 1px #deaa8a;
  font-size: 0.28rem;
  color: #deaa8a;
  text-align: center;
  line-height: 22px;
  margin-left: 0.2rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ysList .forgot {
  display: block;
  font-size: 0.24rem;
  color: #999999;
  opacity: 0.6;
  line-height: 0.44rem;
  margin: 0.2rem 0;
}

.registerBtn {
  width: 6.5rem;
  height: 1rem;
  border-radius: 0.5rem;
  margin: 0.6rem auto 0.4rem;
  color: #2a2631;
  letter-spacing: 1px;
  font-weight: bold;
  text-align: center;
  font-size: 0.4rem;
  line-height: 1rem;
  background-image: linear-gradient(90deg, #fae9db 0%, #e8b596 100%),
    linear-gradient(#deaa8a, #deaa8a);
  background-image: -webkit-linear-gradient(0deg, #fae9db 0%, #e8b596 100%),
    linear-gradient(#deaa8a, #deaa8a);
  background-blend-mode: normal, normal;
  box-shadow: 0px 0px 15px 0px rgba(222, 170, 138, 0.3);
}

.tip {
  color: #deaa8a;
  opacity: 0.6;
  font-size: 0.32rem;
  text-align: center;
  padding: 0.16rem;
  margin: 0 auto;
}
</style>
